<script setup>
import dayjs from 'dayjs'
import { ref, toRefs } from 'vue'
import { loginlogs } from '../api/user.model'

const logs = ref([])
const total = ref(0)
const props = defineProps({})
// const { keepOut } = toRefs(props)

const columns = ref([])

const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

loginlogs.send({ pageSize: 3 }).then((res = {}) => {
  const { total: count, list } = res
  if (!total || !list) return
  columns.value = [
    {
      title: '方式',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
    },
    {
      title: '地址',
      dataIndex: 'ip',
      key: 'ip',
    },
    {
      title: '时间',
      dataIndex: 'updated_at',
      width: 200,
      key: 'updated_at',
    }
  ]
  logs.value = list
  total.value = count
}).catch(err => {
  console.log(err)
})
</script>

<template>
  <div class="analyse">

    <div>
      <h2>登录日志</h2>
      <a-table :data-source="logs" :columns="columns" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'updated_at'">
            {{ formatDate(record[column.key]) }}
          </template>
          <template v-else-if="column.key === 'state'">
            {{ {0: '失败', 1: '成功', 2: '验证码错误', 3: '密码错误', 4: '账号不存在', 5: '锁定', 6: '禁用' }[record[column.key]] }}
          </template>
          <template v-else-if="column.key === 'ip'">
            {{ record.province ? `${record.province}${record.city}` : record[column.key] }}
          </template>
          <template v-else>{{ record[column.key] }}</template>
        </template>
      </a-table>
    </div>
  </div>
</template>
